<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>纵向分割Pdf</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>

      input[type="file"]::-webkit-file-upload-button {
        font-size: 16px; /* 可自定义按钮文字大小 */
      }
    </style>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f7fb;
      }

      .container {
        width: 90%;
        max-width: 600px;
        margin: 50px auto;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      h1 {
        text-align: center;
        color: #333;
        font-size: 24px;
        margin-bottom: 20px;
      }

      input[type="file"] {
        padding: 8px;
        border: 2px solid #ccc;
        border-radius: 4px;
        width: 100%;
        margin-bottom: 20px;
        background-color: #fafafa;
      }

      .radio-group {
        display: flex;
        margin: 20px 0;
      }
      .radio-box {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
      }
      .radio-item {
        margin-bottom: 16px;
        margin-right: 18px;
      }

      .radio-group label {
        font-size: 16px;
        color: #555;
      }

      .radio-group input {
        margin-right: 8px;
      }

      button {
        margin-top: 20px;
        width: 100%;
        padding: 10px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      button:hover {
        background-color: #45a049;
      }

      .note {
        font-size: 14px;
        color: #777;
        text-align: center;
        margin-top: 15px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>上传PDF并选择清晰度</h1>
      <input type="file" id="upload" accept="application/pdf" />

      <div class="radio-group">
        <span>清晰度选择：</span>
        <div class="radio-box">
          <div class="radio-item">
            <label>
              <input type="radio" name="scale" value="1" /> 1倍
            </label>
          </div>

          <div class="radio-item">
            <label> <input type="radio" name="scale" value="2"  /> 2倍 </label>
          </div>

          <div class="radio-item">
            <label> <input type="radio" name="scale" value="3" /> 3倍 </label>
          </div>

          <div class="radio-item">
            <label> <input type="radio" name="scale" value="4" /> 4倍 </label>
          </div>

          <div class="radio-item">
            <label> <input type="radio" name="scale" value="5" checked/> 5倍 </label>
          </div>
        </div>
      </div>

      <button onclick="processPDF()">下载分割图像压缩包</button>

      <div class="note">
        <p>选择适合清晰度后，点击按钮下载压缩包。</p>
      </div>
    </div>

    <script>
        
      function processPDF() {
        const fileInput = document.getElementById("upload");
        const file = fileInput.files[0];
        if (!file) {
          alert("请选择一个PDF文件");
          return;
        }

        const reader = new FileReader();
        reader.onload = function (e) {
          const pdfData = e.target.result;

          // 加载 PDF 文件
          pdfjsLib.getDocument(pdfData).promise.then(function (pdf) {
            const totalPages = pdf.numPages;
            const zip = new JSZip();
            let pagesProcessed = 0;

            // 处理每一页
            for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
              pdf.getPage(pageNum).then(function (page) {
                const scale = document.querySelector('input[name="scale"]:checked').value * 1; // 高分辨率的比例
                console.log(scale)
                const viewport = page.getViewport({ scale });

                // 创建一个 canvas 元素
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                // 渲染 PDF 页到 canvas
                page
                  .render({
                    canvasContext: context,
                    viewport: viewport,
                  })
                  .promise.then(function () {
                    // 将图片分割为两部分
                    const halfWidth = canvas.width / 2;

                    // 获取左半部分图像数据
                    const leftCanvas = document.createElement("canvas");
                    const leftContext = leftCanvas.getContext("2d");
                    leftCanvas.width = halfWidth;
                    leftCanvas.height = canvas.height;
                    leftContext.drawImage(
                      canvas,
                      0,
                      0,
                      halfWidth,
                      canvas.height,
                      0,
                      0,
                      halfWidth,
                      canvas.height
                    );

                    // 获取右半部分图像数据
                    const rightCanvas = document.createElement("canvas");
                    const rightContext = rightCanvas.getContext("2d");
                    rightCanvas.width = halfWidth;
                    rightCanvas.height = canvas.height;
                    rightContext.drawImage(
                      canvas,
                      halfWidth,
                      0,
                      halfWidth,
                      canvas.height,
                      0,
                      0,
                      halfWidth,
                      canvas.height
                    );

                    // 将左半部分图像添加到压缩包
                    leftCanvas.toBlob(function (blob) {
                      zip.file(`page_${pageNum}_left.png`, blob);
                      checkAndDownload();
                    }, "image/png");

                    // 将右半部分图像添加到压缩包
                    rightCanvas.toBlob(function (blob) {
                      zip.file(`page_${pageNum}_right.png`, blob);
                      checkAndDownload();
                    }, "image/png");
                  });
              });
            }

            // 等待所有页面处理完毕后下载压缩包
            function checkAndDownload() {
              pagesProcessed++;
              if (pagesProcessed === totalPages * 2) {
                zip.generateAsync({ type: "blob" }).then(function (content) {
                  const link = document.createElement("a");
                  link.href = URL.createObjectURL(content);
                  link.download = "pdf_images.zip";
                  link.click();
                });
              }
            }
          });
        };
        reader.readAsArrayBuffer(file);
      }
    </script>
  </body>
</html>
